<template>
  <a-drawer
    title="网站设置"
    placement="right"
    :closable="true"
    :open="show"
    @close="closeFn"
  >
    <div class="drawBox">
      <div>
        <div class="drawBox__item">
          <span class="title">{{ $t('menu.themeColor') }}：</span>
          <div class="colorButtons">
            <template
              v-for="(item, index) in themeColors"
              :key="item.primaryColor + index"
            >
              <div class="color" v-if="settingData.colorIndex === index">
                <div
                  class="color-item"
                  :style="{
                    background: item.primaryColor
                  }"
                >
                  <Icon
                    type="CheckOutlined"
                    :style="{ color: '#fff', fontSize: '12px' }"
                  />
                </div>
              </div>
              <div v-else class="color">
                <svg
                  @click="setSettingColor(index)"
                  viewBox="0 0 1024 1024"
                  :fill="item.primaryColor"
                  xmlns="http://www.w3.org/2000/svg"
                  height="100%"
                  width="100%"
                >
                  <path
                    d="M128 160.01219c0-17.67619 14.336-32.01219 32.01219-32.01219h704c17.65181 0 31.98781 14.336 31.98781 32.01219v704c0 17.65181-14.336 31.98781-32.01219 31.98781H160.036571a31.98781 31.98781 0 0 1-32.01219-32.01219V160.036571z"
                  ></path>
                </svg>
              </div>
            </template>
          </div>
        </div>
        <div
          class="drawBox__item"
          v-for="(item, index) in settings"
          :key="index"
        >
          <span class="title">{{ item.title() }}：</span>
          <component
            :is="COMPONENT[item.componentType]"
            v-model:[item.valueType]="settingData[item.dataIndex]"
            v-bind="item.fieldProps"
            :checkedChildren="
              item.fieldProps.checkedChildren
                ? item.fieldProps.checkedChildren()
                : ''
            "
            :unCheckedChildren="
              item.fieldProps.checkedChildren
                ? item.fieldProps.unCheckedChildren()
                : ''
            "
          >
            <!--     筛选框的下拉       -->
            <template v-if="item.options && item.options.length >= 1">
              <a-select-option
                v-for="option in item.options"
                :value="option.value"
                :key="option.value"
                :disabled="option.disabled"
              >
                {{ option.label }}
              </a-select-option>
            </template>
            <!--     radio的多选      -->
            <template v-if="item.radios && item.radios.length >= 1">
              <RadioButton
                v-for="option in item.radios"
                :value="option.value"
                :key="option.value"
              >
                {{
                  typeof option.label === 'function'
                    ? option.label()
                    : option.label
                }}</RadioButton
              >
            </template>
          </component>
          <span v-if="item.lastText" style="margin-left: 10px">
            {{ item.lastText }}
          </span>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button type="primary">
        {{ $t('menu.defaultTitle') }}
      </a-button>
    </template>
  </a-drawer>
</template>
<script setup>
import { defineProps, onMounted, reactive, watchEffect } from 'vue'
import settings from './settings'
import { themeColors } from '@/theme/color'
import Icon from '@/components/Icon'
import { appDefaultConfig } from '@/config/app_config'
import {
  InputNumber,
  RadioButton,
  RadioGroup,
  Select,
  Switch
} from 'ant-design-vue'
import { useStore } from 'vuex'
import { DEFAULT_COLOR, MAIN_COLOR } from '@/theme/constant'

const store = useStore()
// 映射 antd 的组件
const COMPONENT = {
  select: Select,
  switch: Switch,
  number: InputNumber,
  radios: RadioGroup
}
const settingData = reactive({
  ...appDefaultConfig,
  colorIndex: 0,
  breadcrumb: true,
  menuLayout: 'default',
  menuTheme: 'dark',
  menuWidth: 85,
  theme: ''
})

// 初始化颜色主题
onMounted(() => {
  const color = localStorage.getItem(MAIN_COLOR) || DEFAULT_COLOR
  settingData.colorIndex = themeColors.findIndex((item) => {
    return item.primaryColor === color
  })
})
const setSettingColor = (index) => {
  settingData.colorIndex = index
  store.commit('theme/setMainColor', themeColors[index].primaryColor)
}
defineProps({
  placement: String,
  show: {
    type: Boolean,
    default: false
  },
  closeFn: Function
})

watchEffect(() => {
  store.commit('app/setAppConfig', settingData)
})
</script>

<style scoped lang="scss">
$itemSpace: 30px;
.drawBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  &__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: $itemSpace;
    .title {
      width: 120px;
      margin-right: 5px;
      text-align: right;
    }
    .colorButtons {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
}

.color {
  height: 23px;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  &-item {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
